<!-- 客源  跟进管理 -->
<template>
    <div>
        <div class="search">
            <el-form :inline="true" :model="searchData" size="mini" class="demo-form-inline">
                <el-form-item label="跟进时间" prop="start_time">
                    <el-date-picker type="date" placeholder="请选择" v-model="searchData.start_time" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>_
                <el-form-item label="" prop="end_time">
                    <el-date-picker type="date" placeholder="请选择" v-model="searchData.end_time" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="类型" prop="people_type">
                    <el-select v-model="searchData.people_type">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="(item,index) in people_type_opt" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="部门" prop="department_id">
                    <el-select v-model="searchData.department_id" @change="obtainUser">
                        <el-option label="全部" value=""></el-option>
                        <!-- <el-option v-for="(item,index) in optionName" :key="index" :label="item.name" :value="item.id"></el-option> -->
                        <el-option-group v-for="group in optionName" :key="group.label" :label="group.label">
                            <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-option-group>
                    </el-select>
                </el-form-item>
                <el-form-item label="员工" prop="u_id">
                    <el-select v-model="searchData.u_id">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="(item,index) in userType" :key="index" :label="item.u_username" :value="item.u_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="交易" prop="trading_type">
                    <el-select v-model="searchData.trading_type">
                        <el-option label="全部" value="0"></el-option>
                        <el-option v-for="(item,index) in trading_type_opt" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="跟进方式" prop="cf_fllow_type">
                    <el-select v-model="searchData.cf_fllow_type">
                        <el-option label="全部" value="0"></el-option>
                        <el-option v-for="(item,index) in follow_up_way_opt" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="" prop="keywords">
                    <el-input v-model="searchData.keywords" placeholder="跟进内容、客源编号、业主、业主手机号" style="width: 250px;"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search" size="mini">查询</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class='content'>
            <div class='list'>
                <el-table :data="list.data" style="width: 100%" tooltip-effect="dark">

                    <el-table-column align="center" prop="cf_id" label="跟进ID" width="120"></el-table-column>
                    <el-table-column align="center" prop="cf_created_at" label="跟进时间" width="140"></el-table-column>
                    <el-table-column align="center" prop="name" label="部门名称" width="120"></el-table-column>
                    <el-table-column align="center" prop="u_username" label="跟进人" width="120"></el-table-column>
                    <el-table-column align="center" :formatter="follow_up_wayFun" prop="cf_fllow_type" label="跟进方式" width="120"></el-table-column>
                    <el-table-column align="center" prop="cf_content" label="跟进内容" width="120" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column align="center" prop="c_numbering" label="客源编号" width="120"></el-table-column>
                    <el-table-column align="center" prop="c_user_name" label="客户" width="120"></el-table-column>
                    <el-table-column align="center" prop="c_trading_type" label="交易" width="120"></el-table-column>
                    <el-table-column align="center" prop="c_use_type" label="用途" width="120"></el-table-column>
                    <el-table-column align="center" prop="c_buy_status" label="状态" width="120"></el-table-column>
                    <el-table-column align="center" prop="cfs_remind_time" label="提醒时间" width="120"></el-table-column>
                    <el-table-column align="center" prop="cfs_content" label="提醒内容" width="120" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column align="center" prop="cfs_name" label="提醒人" width="120"></el-table-column>
                    <el-table-column align="center" label="操作" width="70" fixed="right">
                    <template slot-scope="scope">
                        <el-button @click.native.prevent="del(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination :current-page="current" @current-change="handleCurrentChange" :total="list.total" style="margin-top:30px;"></el-pagination>
            </div>
        </div>
    </div>
</template>
<style>
    .home .view-content{
        width: 87%;
    }
    .el-form-item__label,.el-form-item__content{
        font-size: 12px;
    }
    .el-input{
        padding-right: 5px;
    }
    .el-select-dropdown__item{
        font-size: 12px;
        padding: 0px 10px;
        height: 26px;
        line-height: 26px;
    }
    .el-input,.el-date-editor.el-input{
        width: 145px;
    }
</style>
<script>
    import conf from '../../../config/userconf.js'
    import permconfig from "../../../config/permconfig.js"
    export default {
        data() {
            return {
                list: [],  //
                searchData: {
                    start_time: '',
                    end_time: '',
                    people_type: '',
                    department_id: '',
                    u_id: '',
                    trading_type: '',
                    cf_fllow_type: '',
                    keywords: '',
                }, 
                current: 1,
                optionName: [],
                userType: [],
                f_id: '',  //
                people_type_opt: [
                    {name: '跟进员工',id: '1'},
                    {name: '客源归属人',id: '2'},
                ],
                trading_type_opt: [
                    {name: '求购',id: '1'},
                    {name: '求租',id: '2'},
                    {name: '租购',id: '3'},
                ],
                follow_up_way_opt: [
                    {name: '去电',id: '1'},
                    {name: '来电',id: '2'},
                    {name: '看房',id: '3'},
                    {name: '勘察',id: '4'},
                    {name: '来访',id: '5'},
                    {name: '拜访',id: '6'},
                    {name: '派单',id: '7'},
                    {name: '短信',id: '8'},
                    {name: '邮件',id: '9'},
                    {name: '信函',id: '10'},
                    {name: '申请',id: '11'},
                    {name: '修改',id: '12'},
                    {name: '保留',id: '13'},
                    {name: '其他',id: '14'},
                ],
                initdate: true,
            }
        },
        methods: {
            /* 列表*/
            getList (data=Object()){
                data.page = this.current;
                conf.resources.getallfollowlist(data,(state,res)=>{
                    if (state == 'success'&&res.data.code == 0){
                        // console.log(res);
                        this.list = res.data.data;
                        if(this.initdate){
                            this.searchData.start_time = res.data.start;
                            this.searchData.end_time = res.data.end;
                        }
                    }else if(state == 'success'&&res.data.code != 0){
                        if(res.data.code == 401){
                            this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                        }else if(res.data.code == -404){
                            this.list = [];
                            res.data.msg = JSON.parse(res.data.msg);
                            if(this.initdate){
                                this.searchData.start_time = res.data.start;
                                this.searchData.end_time = res.data.end;
                            }
                        }else{
                            this.$message({
                                type: 'info',
                                message: res.data.msg
                            });
                        }
                    }
                })
            },
            // 切换页码
            handleCurrentChange(val) {
                this.current = val;
                this.getList();
            },
            //获取部门
            obtainName(data=Object()){
                conf.department.nameOpt(data,(state,res)=>{
                    if (state == 'success'&&res.data.code == 0){
                        this.optionName = res.data.data;
                        // console.log(res); 
                    }else if(state == 'success'&&res.data.code != 0){
                        if(res.data.code == 401){
                            this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                        }else if(res.data.code == -404){
                            this.optionName = [];
                        }else{
                            this.$message({
                                type: 'info',
                                message: res.data.msg
                            });
                        }
                    }
                }, 'qx_room_chakangenjin')
            },
            //获取部门员工
            obtainUser(val,data=Object()){
                this.userType = [];
                this.searchData.u_id = '';
                data.d_id = val;
                conf.department.userOpt(data,(state,res)=>{
                    if (state == 'success'&&res.data.code == 0){
                        // console.log(res); 
                        this.userType = res.data.data;
                    }else if(state == 'success'&&res.data.code != 0){
                        if(res.data.code == 401){
                            this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                        }else{
                            this.$message({
                                type: 'info',
                                message: res.data.msg
                            });
                        }
                    }
                })
            },
            /*查询 */
            search () {
                this.initdate = false;
                let data  = this.searchData;
                this.getList(data);
            },
            /*删 */
            del (row,data=Object()) {
                this.$confirm('确认删除跟进ID为 ['+row.cf_id+'] 吗?', '删除客源跟进', {  
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => { 
                    permconfig.qx_ke_shanchugenjin(row, (res)=>{
                        if(!res){
                            alert('您没有权限删除此数据');
                            return;
                        }
                        data.cf_id = row.cf_id;
                        conf.resources.delfollow(data,(state,res)=>{
                            if (state == 'success'&&res.data.code == 0){
                                
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                this.getList();
                            }else if(state == 'success'&&res.data.code != 0){
                                if(res.data.code == 401){
                                    this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                                }else{
                                    this.$message({
                                        type: 'info',
                                        message: res.data.msg
                                    });
                                }
                            }
                        })
                    })

                }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消删除'
                    });          
                });
            },
            //跟进方式
            follow_up_wayFun(row, column, cellValue, index){
                switch (cellValue) {
                    case 1:
                        return '去电'
                    case 2:
                        return '来电'
                    case 3:
                        return '看房'
                    case 4:
                        return '勘察'
                    case 5:
                        return '来访'
                    case 6:
                        return '拜访'
                    case 7:
                        return '派单'
                    case 8:
                        return '短信'
                    case 9:
                        return '邮件'
                    case 10:
                        return '信函'
                    case 11:
                        return '申请'
                    case 12:
                        return '修改'
                    case 13:
                        return '保留'
                    case 14:
                        return '其他'
                }
            },
        },
        mounted (){
            this.$nextTick(function(){
                this.getList();
                this.obtainName();
            })
        },
    }
</script>